import 'package:flutter/material.dart';
import 'package:flutter_juwo/common/common_index.dart';
import 'package:flutter_picker/flutter_picker.dart';

class BankCard extends StatefulWidget {
  @override
  _BankCardState createState() => _BankCardState();
}

class _BankCardState extends State<BankCard> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  String bankName = "";
  List<String> bankList = ["中国银行", "招商银行", "工商银行", "建设银行", "农业银行"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: UiUtils.appBar(context, "绑定银行卡"),
      body: Column(
        children: <Widget>[
          UiUtils.dividerWidget(ScreenUtil().setWidth(20)),
          Expanded(
            flex: 1,
            child: EasyRefresh(
                child: ListView(
                  children: <Widget>[
                    getTop(),
                    UiUtils.dividerWidget(ScreenUtil().setWidth(20)),
                    getFrom(context),
                  ],
                )),
          ),
          getBottom(),
        ],
      ),
      resizeToAvoidBottomPadding: false,
    );
  }

  getFrom(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        children: <Widget>[
          Container(
            height: ScreenUtil().setWidth(100),
            margin: EdgeInsets.fromLTRB(
                ScreenUtil().setWidth(30), 0, ScreenUtil().setWidth(30), 0),
            child: Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(right: ScreenUtil().setWidth(80)),
                  child: Text(
                    "持卡人姓名",
                    style: TextStyles.custom(
                        28, Colours.appC1, Font.PingFangMedium),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: TextField(
                    textAlign: TextAlign.end,
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "请输入持卡人姓名",
                        hintStyle: TextStyles.custom(
                            24, Colours.appC3, Font.PingFangMedium)),
                  ),
                )
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: ScreenUtil().setWidth(30)),
            child: UiUtils.dividerWidget(ScreenUtil().setWidth(2)),
          ),
          Container(
            height: ScreenUtil().setWidth(100),
            margin: EdgeInsets.fromLTRB(
                ScreenUtil().setWidth(30), 0, ScreenUtil().setWidth(30), 0),
            child: Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(right: ScreenUtil().setWidth(80)),
                  child: Text(
                    "选择对应银行",
                    style: TextStyles.custom(
                        28, Colours.appC1, Font.PingFangMedium),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: GestureDetector(
                    onTap: () {
                      showPicker(context);
                    },
                    child: Text(
                      bankName == "" ? "请选择" : bankName,
                      textAlign: TextAlign.end,
                      style: TextStyles.custom(
                          24, Colours.appC3, Font.PingFangMedium),
                    ),
                  ),
                )
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: ScreenUtil().setWidth(30)),
            child: UiUtils.dividerWidget(ScreenUtil().setWidth(2)),
          ),
          Container(
            height: ScreenUtil().setWidth(100),
            margin: EdgeInsets.fromLTRB(
                ScreenUtil().setWidth(30), 0, ScreenUtil().setWidth(30), 0),
            child: Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(right: ScreenUtil().setWidth(80)),
                  child: Text(
                    "银行卡号",
                    style: TextStyles.custom(
                        28, Colours.appC1, Font.PingFangMedium),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: TextField(
                    textAlign: TextAlign.end,
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "请输入银行卡号",
                        hintStyle: TextStyles.custom(
                            24, Colours.appC3, Font.PingFangMedium)),
                  ),
                )
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: ScreenUtil().setWidth(30)),
            child: UiUtils.dividerWidget(ScreenUtil().setWidth(2)),
          ),
          Container(
            height: ScreenUtil().setWidth(100),
            margin: EdgeInsets.fromLTRB(
                ScreenUtil().setWidth(30), 0, ScreenUtil().setWidth(30), 0),
            child: Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(right: ScreenUtil().setWidth(80)),
                  child: Text(
                    "确认卡号",
                    style: TextStyles.custom(
                        28, Colours.appC1, Font.PingFangMedium),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: TextField(
                    textAlign: TextAlign.end,
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "请再次输入银行卡号确认",
                        hintStyle: TextStyles.custom(
                            24, Colours.appC3, Font.PingFangMedium)),
                  ),
                )
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: ScreenUtil().setWidth(30)),
            child: UiUtils.dividerWidget(ScreenUtil().setWidth(2)),
          ),
        ],
      ),
    );
  }

  getTop() {
    return Container(
      padding: EdgeInsets.fromLTRB(
          ScreenUtil().setWidth(30),
          ScreenUtil().setWidth(20),
          ScreenUtil().setWidth(30),
          ScreenUtil().setWidth(38)),
      color: Color(0xFFffdedf),
      child: Text(
        "请勿使用信用卡绑定，不支持礼遇上没有显示得银行，若绑定错误，请联系客服。",
        style: TextStyles.custom(
            24, Color(0xFFdf3033), Font.PingFangMedium),
      ),
    );
  }

  getBottom() {
    return Container(
      margin: EdgeInsets.only(bottom: ScreenUtil().setWidth(60)),
      child: UiUtils.bottomBotton("提交审核", () {}),
    );
  }

  showPicker(BuildContext context) {
    Picker picker = new Picker(
        adapter: PickerDataAdapter<String>(

            ///new JsonDecoder().convert(PickerData)
            pickerdata: bankList),
        changeToFirst: true,
        textStyle:
            TextStyles.custom(32, Colors.black, Font.PingFangMedium),
        confirmText: "确定",
        cancelText: "取消",
        cancelTextStyle:
            TextStyles.custom(28, Colors.blue, Font.PingFangMedium),
        confirmTextStyle:
            TextStyles.custom(28, Colors.blue, Font.PingFangMedium),
        textAlign: TextAlign.left,
        columnPadding: const EdgeInsets.all(8.0),
        onConfirm: (Picker picker, List value) {
          setState(() {
            bankName = picker.getSelectedValues()[0];
          });
          print(value.toString());
          print(picker.getSelectedValues());
        },
        onCancel: () {
          setState(() {
            bankName = "";
          });
        });
    picker.show(_scaffoldKey.currentState);
  }


}
